<template>
  <div class="rule-item">
    <div class="rule-item-box">
      <div class="rule-item-title">
        <span class="type-style">
          <i class="blue-color">{{ getPeriod(ruleData.period) }}</i>
          警情
          <i class="blue-color">{{ getType(ruleData.type) }}</i>
          增长时，进行预警。
        </span>
      </div>
      <div class="rule-item-content">
        <span class="red-style color-style">
          <img src="@/assets/yj-red.png" alt="" />
          红色预警：
        </span>
        ≥{{ ruleData.level1 }}
        <span v-if="ruleData.type !== 'N'">%</span>
        <span class="orange-style color-style">
          <img src="@/assets/yj-orange.png" alt="" />
          橙色预警：
        </span>
        ≥{{ ruleData.level2 }}
        <span v-if="ruleData.type !== 'N'">%</span>
        <span class="yellow-style color-style">
          <img src="@/assets/yj-yellow.png" alt="" />
          黄色预警：
        </span>
        ≥{{ ruleData.level3 }}
        <span v-if="ruleData.type !== 'N'">%</span>
        <span class="blue-style color-style">
          <img src="@/assets/yj-blue.png" alt="" />
          蓝色预警：
        </span>
        ≥{{ ruleData.level4 }}
        <span v-if="ruleData.type !== 'N'">%</span>
      </div>
    </div>
    <div class="rule-item-extra" v-if="$slots.default">
      <slot />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  props: {
    ruleData: {},
  },
  setup() {
    //周期类型数据转换
    const getPeriod = (period: string): string => {
      const periodMap = {
        D: '每日',
        W: '每周',
        M: '每月',
      };
      return periodMap[period] || '-';
    };
    // 增长类型数据转换
    const getType = (type: string): string => {
      const typeMap = {
        T: '同比',
        H: '环比',
        N: '数值',
      };
      return typeMap[type] || '-';
    };
    onMounted(() => {});
    return {
      getPeriod,
      getType,
    };
  },
});
</script>

<style scoped lang="less">
.rule-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .rule-item-box {
    .rule-item-title {
      .type-style {
        display: inline-block;
        width: 70px;
        width: 300px;
        overflow: hidden;
        color: #b9c4dd;
        color: #b9c4dd;
        white-space: nowrap;
        text-overflow: ellipsis;
        .blue-color {
          color: #5da0ff;
          font-style: normal;
        }
      }
      .type-style + .type-style {
        margin-left: 20px;
      }
    }
    .rule-item-content {
      padding-bottom: 10px;

      .red-style {
        color: #ff1b3f;
      }
      .orange-style {
        color: #ff6f1c;
      }
      .yellow-style {
        color: #ecd60d;
      }
      .blue-style {
        color: #1cdaff;
      }
      .color-style + .color-style {
        margin-left: 20px;
      }
    }
  }
}
</style>
